import React from 'react';
import 'antd/dist/antd.css'
import './production.css'
import {Typography} from 'antd'
import {Link} from 'react-router-dom'
import {useTranslation} from 'react-i18next'
interface PropsType{
    id:string|number;
    size:"small"|"large";
    title:string;
    price:number|string;
    imgsrc:string;
}
export const Production:React.FC<PropsType>=({id,size,title,imgsrc,price})=>{
    const {t}=useTranslation();
    return(
        <Link to={`detail/${id}`}>
            <div className="production">
                {
                    size=="large"?(<img src={imgsrc} height={285} width={490}/>)
                        :
                        (<img src={imgsrc} height={120} width={240}/>)
                }
                <div>
                    <Typography.Text type="secondary">{title.slice(0,25)}</Typography.Text>
                    <Typography.Text type="danger">¥ {price} {t("home_page.start_from")}</Typography.Text>
                </div>
            </div>
        </Link>
    )
}
export default Production